<template>
  <div class="el-mr-standardReceipt"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <TableTitle>
      <slot>
        <p>
          流程进度
        </p>
      </slot>
    </TableTitle>
    <div>
      <el-steps :active="active" finish-status="success" style="margin-top: 10px;" align-center>
        <el-step title="扫码移交" ></el-step>
        <el-step title="成品接收" ></el-step>
      </el-steps>
      <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
    </div>
    <TableTitle>
      <slot>
        <p>
          扫码操作
        </p>
      </slot>
    </TableTitle>
    <TopSearch ref="makeFinTmNull">
      <slot>
        <li>
          <el-button size="mini" type="primary" @click="scanning"
            >扫码移交</el-button
          >
        </li>
        <li>
          <el-select size="mini" v-model="sendType" placeholder="是否直配">
            <el-option label="直配" value="Y"></el-option>
            <el-option label="不直配" value="N"></el-option>
          </el-select>
          <span style="color:red;margin-left: 5px;">默认物料需要直配的话去其他界面操作，如果不直配要入库，请选择不直配</span>
        </li>
      </slot>
    </TopSearch>
  <div class="el-mr-mr-firstbg">
        <TableTitle>
        <slot>
          <p>
            已移交成品列表
          </p>
        </slot>
      </TableTitle>
      <TableOne></TableOne>
    </div>

    <div class="el-mr-mr-secondbg">
      <TableTitle>
      <slot>
        <p>
          已接收成品列表
        </p>
      </slot>
    </TableTitle>
      <el-table
        ref="receiveTable"
        size="mini"
        :data="isScanList ? ScanListData : prSearchData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="258"
        highlight-current-row
      >
        <!-- 勾选 -->
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="mesCheckQualiticationId" label="成品合格证" width="170" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="isPaper" label="是否带证" width="120" :show-overflow-tooltip="true"></el-table-column>

        <el-table-column prop="mProductNumber" label="成品型号" width="130" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="qualityCode" label="成品件号" width="130" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="itemCode" label="物料编码" width="130" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="requireShop" label="需求单位" width="150" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="substituteCode" label="限用架次" width="150" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="maxStorageDate" label="最长保管期" width="150" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column  prop="productDTOList[0].productName"  label="机型" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="startLotNo" label="起始架次" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="endLotNo" label="截止架次" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column  prop="deliveryQty" label="数量"  :show-overflow-tooltip="true" >  </el-table-column>
        <el-table-column
          prop="srmSupplyId"
          label="供应商"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="deliveryDate"
          label="移交时间"
          width="130"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="rejectReason"
          label="拒收原因"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="deliveryStatus"
          label="是否直配"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="deliveryStatus" label="接收状态"  :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="wmsDeliveryPlanId" label="交接单id"  :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="totalCount"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 分页 -->
  </div>
</template>
<script>
import TopSearch from "../../../../components/TopSearch.vue";
import TableOne from "./components/FrTables.vue";
import { finReceiveTm,finReceive,finSearch,bufferBoxOut } from "@/utils/api.js";
import TableTitle from "../../../../components/TableTitle.vue"

export default {
  name: "standardReceipt",
  components: {
    TopSearch,
    TableOne,
    TableTitle
  },
  data() {
    return {
      // 查询条件
      searchInfo: {
        itemCode: "",
        qualityCode: "",
        transferPerson: "",
        startTime: "",
        endTime: "",
      },
      // input
      tiaoma: "",
      // 当前页数
      pageNumber: 1,
      pageNumber2: 1,
      // 数据总个数
      totalCount: 0,
      totalCount2: 0,
      // 返回的数据数组
      resData: [],
      resData2: [],
      // 每页数据个数
      pageSize: 200,
      pageSize2: 200,
      // 确认列表高亮参数
      stableIndex: 0,

      // 勾选数组
      multipleSelection: [],
      // 判断是否是成品扫码移下来的数据
      isScanList: true,
      // 存储已经扫码的数据表
      ScanListData: [],
      // 接收上表传来的数据表
      finReceiveList: [],
      // 下表勾选数据的barcode的list
      selectList: [],
      // 下表勾选的数据表
      selectHcxoutList:[],
      // 归总接收数据的条码
      receiveDataList:[],
      // 接收条件查询得到的data
      prSearchData:'',
      loginInfo:'',
      deleteTiaoma:'',
      // 操作码两次确认
      isConfirm:false,
      // 进度条参数
      active:0,
      // 是否扫码移交
      isScanYj:false,
      loading:false,
      //是否直配
      sendType:"Y"
    };
  },
  methods: {
    scanning(){
      if(this.tiaoma == 9005){
        if(this.ScanListData != []){
          if(this.isConfirm){
            this.loading=true;
            this.$options.methods.finReceiveBtn.bind(this)()
            this.isConfirm = false
          }else{
            this.isConfirm = true
          }
        }else{
          this.$Alert({
            title: "失败",
            message: '请输入正确操作码',
            type: "error",
          })
        }
      }else{
        //yebo 判断是否重复扫码
        var tm = JSON.parse(this.tiaoma);
        for(var i=0;i<this.ScanListData.length;i++){
            if(tm.CPHGZ==this.ScanListData[i].mesCheckQualiticationId){
              this.$Alert({title: "失败",message: '请误重复扫码',type: "error"});
              return ;
            }
        }
        this.$options.methods.topToLastscan.bind(this)()
      }
      
    },
    // 进度条函数
    next() {
        if (this.active++ > 0){
          setTimeout(()=>{
            this.active = 0
          },1000)
        }
        console.log(this.active)
      },
     // 成品接收扫码接收
    topToLastscan() {
      let barcodes = ''
      let tm = this.tiaoma
      barcodes = JSON.parse(tm).CPHGZ
      finReceiveTm({
        barcode: barcodes,
        sendType:this.sendType,
        pageParameter: {
          page: this.pageNumber,
          rows: this.pageSize,
        },
      }).then((res) => {
        console.log('成品扫码移交',res)
        if(res.data.retCode == 200){
          // 进度条函数
          this.$options.methods.next.bind(this)()
          // 是否扫码移交
        //  this.isScanYj = true
          this.sss = res.data.responseBody.result
          for (let i = 0; i < this.sss.length; i++) {
            this.ScanListData.push(this.sss[i]);//yebo

            // if (this.tiaoma == this.sss[i].barcode) {
          /*  if (barcodes == this.sss[i].mesCheckQualiticationId) {
              if(this.ScanListData.length == 0){
                this.ScanListData.push(this.sss[i])
                this.$Alert({
                  title: "成功",
                  message: res.data.message,
                  type: "success",
                })
              }else{
                for(let k=0;k<this.ScanListData.length;k++){
                  let knum = 0;
                  // if(this.tiaoma != this.ScanListData[k].barcode){
                  if(barcodes != this.ScanListData[k].mesCheckQualiticationId){
                    knum++
                    if(knum == this.ScanListData.length){
                      this.ScanListData.push(this.sss[i])
                      this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                      })
                    }else{
                      this.$Alert({
                        title: "失败",
                        message: this.tiaoma+'已扫码',
                        type: "error",
                      })
                    }
                  }
                }
              }
              // 将Table数据从接收查询Data切换为已经扫码的Data
              this.isScanList = true;
            }*/
          }
          this.$Alert({ title: "成功",message: res.data.message,type: "success" })
          // 清空条码框 并 聚焦
          this.$refs.makeFinTmNull.makeTmNull()
          this.$refs.makeFinTmNull.openScan()
          // 默认全选Table数据
          // for(let j=0;j<this.ScanListData.length;j++){
          //   this.$refs.receiveTable.toggleRowSelection(this.ScanListData[j],true);
          // }
        }else {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          })
        }
      });
    },
    // Table勾选函数
    handleSelectionChange(val) {
      // 将下表选中的数据储存到selectList
      this.selectList = []
      this.selectHcxoutList = val
      for(let i=0;i<val.length;i++){
        // this.selectList.push(val[i].barcode)
        this.selectList.push(val[i].mesCheckQualiticationId)
      }
      console.log(this.selectList)
    },
    // 成品接收按钮
    finReceiveBtn(){
      if(this.selectList == ''){
        this.$Alert({
          title: "失败",
          message: '请先进行扫码移交操作',
          type: "error",
        })
      }else{
        this.loginInfo = sessionStorage.getItem("userJobNumber")
        // data传参数据拼接
        let hcxBoxInfoList = []
        let hcxData = ''
        for(let i=0;i<this.selectHcxoutList.length;i++){
          hcxData = {'itemCode':this.selectHcxoutList[i].itemCode,'deliveryQty':this.selectHcxoutList[i].deliveryQty,
          "wmsDeliveryPlanId":this.selectHcxoutList[i].wmsDeliveryPlanId,
          'barcode':this.selectHcxoutList[i].mesCheckQualiticationId}
          hcxBoxInfoList.push(hcxData)
        }
        finReceive({
          // barcode:this.selectList[0],
          barcode:this.selectList[0],
          receiveEmpCode:this.loginInfo,
          data:hcxBoxInfoList
        }).then((res)=>{
          if(res.data.retCode == 200){
            // 假传参给上表，刷新上表数据
            this.$bus.$emit('refreshFinTopTable','刷新')
            // 进度条函数
            this.$options.methods.next.bind(this)()
            // 是否扫码移交还原
            this.isScanYj = false
            // 清空条码框 并 聚焦
            this.$refs.makeFinTmNull.makeTmNull()
            this.$refs.makeFinTmNull.openScan()
            // this.receiveDataList.push(this.selectList[0].barcode)
            for(let i=0;i<this.selectList.length;i++){
              for(let j=0;j<this.ScanListData.length;j++){
                // if(this.selectList[i] == this.ScanListData[j].barcode){
                if(this.selectList[i] == this.ScanListData[j].mesCheckQualiticationId){
                  this.ScanListData.splice(j,1)
                  this.isScanList = true
                }
              }
            }
            this.$Alert({
              title: "成功",
              message: res.data.message,
              type: "success",
            })
          }else{
            this.$Alert({
              title: "失败",
              message: res.data.message,
              type: "error",
            })
          }
          this.loading=false;
          console.log('成品接收接收按钮',res)
        })
      }
    },
    // 下表撤销按钮
    deleteBtn(){
      for(let tr=0;tr<this.selectList.length;tr++){
        if(this.selectList[tr]== this.deleteTiaoma){
          this.ScanListData.splice(tr,1)
        }
      }
      this.deleteTiaoma = ''
      this.$refs.deleteInput.focus()
    },
    // 成品明细查询--统查
    finReturnAllSearch(){
      finSearch({
          searchParams:{
          qualityCode:'',
          deliveryEmpCode:''
        },
        pageParameter:{
          rows:this.pageSize,
          page:1 
        },
        startTime:'',
        endTime:'',                  
        drawNo:'',
      }).then((res) => {
        console.log('成品接收条明细', res);
        // this.resData = res.data.responseBody.result;
        // this.totalCount = res.data.responseBody.pageParameter.totalCount;
        this.isScanList = false
        this.prSearchData = res.data.responseBody.result
      });
    },
    // 条件查询按钮
    scanningSearch() {
        finSearch({
          searchParams:{
          qualityCode:this.searchInfo.qualityNumber,
          deliveryEmpCode:this.searchInfo.transferPerson
        },
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber 
        },
        startTime:this.searchInfo.startTime,
        endTime:this.searchInfo.endTime,                  
        drawNo:this.searchInfo.itemCode,
      }).then((res) => {
        console.log('成品接收条件查询', res);
        // this.resData = res.data.responseBody.result;
        // this.totalCount = res.data.responseBody.pageParameter.totalCount;
        this.isScanList = false
        this.prSearchData = res.data.responseBody.result
      });
    },
   
    // 下表分页
    handleCurrentChange(val) {
      this.pageNumber = val;
    },
  },
  mounted() {
    // 接收TopSearch的条码
    this.$bus.$on("saoma", (e) => {
      this.tiaoma = e;
      // console.log('条码',e)
    }),
    // 接收待扫码的数据
    this.$bus.$on('finReceiveTopTable',(e)=>{
      this.finReceiveList = e
    })
  },
  watch:{
    'ScanListData':{
            immediate:true,
            deep:true,
            handler:function (val) {
                this.$nextTick(()=>{
                  this.isScanList = true
                  for(let k=0;k<this.ScanListData.length;k++){
                    this.$refs.receiveTable.toggleRowSelection(this.ScanListData[k],true);
                  }
                })
            }
        }
  }
};
</script>
<style scoped>
.el-mr-mr-midSearch {
  overflow: hidden;
}
.el-mr-mr-midSearch ul li {
  height: 35px;
  float: left;
  margin-right: 10px;
  line-height: 35px;
}
.el-mr-mr-midSearch ul li .el-input {
  width: 175px;
}
.el-pagination {
  text-align: center;
}
.el-table /deep/ .highlight-row {
  background: rgb(248, 165, 117);
}
</style>